* {
  margin: 0px;
  padding: 0px;
}
.box {
  margin: 0 auto;
  margin-top: 50px;
  width: 500px;
}

/* 版头 */
.header {
  height: 70px;
  background-color: rgb(162, 135, 225);
  padding-left: 40px;
  margin-bottom: 20px;
  border-radius: 25px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
  font: normal normal 20px 微软雅黑;
  /* 放在字体设置前不好使 */
  line-height: 70px;
}

/* 添加待办输入框 */
.header input {
  height: 36px;
  width: 270px;
  border-radius: 3px;
  border: none;
  background-color: #fff;
  padding-left: 20px;
  margin-left: 20px;
  /* 阴影 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  font-size: 14px;
  cursor: pointer;
  box-sizing: border-box;
}
.header input:focus {
  background-color: #fff;
  outline: none;
}
/* 待办列表 */
.list {
  position: relative;
  border: 2px solid rgb(233, 233, 233);
  border-radius: 25px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  background-color: #fff;
  text-decoration: none;
  padding-top: 25px;
  padding-bottom: 5px;
}
.list li {
  position: relative;
  display: block;
  height: 50px;
  background-color: rgb(219, 206, 245);
  margin-bottom: 20px;
  line-height: 40px;
}
/* 待办内容 */
.list li p {
  position: absolute;
  left: 25px;
  top: 10%;
  font-size: 16px;
}

/* 发布时间 */
.list li span {
  position: absolute;
  top: 35%;
  right: 120px;
  color: rgb(255, 255, 255);
  font: normal normal 15px Arial;
}

/* 字体图标 */
.list li .iconfont {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 35px;
  width: 35px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  vertical-align: auto;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

/* 字体图标-删除 */
.list li .icon-shanchu1 {
  right: 15px;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.list li .icon-shanchu1:hover {
  background-color: #f59797;
  border-color: #f59797;
}

/* 字体图标-编辑 */
.list li .icon-bianji {
  right: 60px;
  background-color: rgb(102, 177, 255);
  border-color: rgb(102, 177, 255);
}
.list li .icon-bianji:hover {
  background-color: rgb(184, 211, 240);
  border-color: rgb(184, 211, 240);
}

/* 待办内容文本框 */
.list li input {
  position: absolute;
  left: 15px;
  top: 25%;
  height: 25px;
  cursor: pointer;
  padding-left: 12px;
  border: 1px solid rgb(162, 135, 225);
}
.list li input:focus {
  outline: none;
}
